<?php
/**
 * @link https://www.kancloud.cn/cleverstone/ymb2
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

use builder\helper\H5;
use yii\helpers\Json;

/* ===================== 动态控件项模板 ===================== */

/** @var \yii\web\View $this View实例 */
/** @var array $controlOptions 控件配置项 */
/** @var string $requiredStyle 必填风格 */
?>
<div class="form-group col-md-<?= $controlOptions['layout'] ?> <?= $controlOptions['class'] ?>" style="<?= $controlOptions['style'] ?>"<?= $controlOptions['attribute'] ?>>
    <!--标签-->
<?php if (!empty($controlOptions['label'])): ?>
    <label class="mb-2 label-color ym2-form-label">
        <?= $controlOptions['label'] ?>

<?php if (!empty($controlOptions['help'])): ?>
        <!--帮助-->
        <i style="cursor: help;"
           class="layui-icon layui-icon-tips layui-font-gray f14"
           data-toggle="popover"
           data-trigger="hover"
           data-custom-class="f13 white-space-pre-wrap pointer-event-none"
           data-html="true"
           data-content="<?= H5::encode($controlOptions['help']) ?>"
           ym2-bootstrap-plugin="popover"></i>
<?php endif; ?>
        <comment class="text-comment pl-1 f12"><?= $controlOptions['comment'] ?></comment>
    </label>
<?php endif; ?>
    <!--表格-->
    <div class="css__dynamic_table w-100 overflow-auto">
        <table class="layui-table"<?= $controlOptions['skinAttribute'] ?>>
            <thead>
            <tr>
                <th class="p-1 bg-light"></th>
<?php foreach ($controlOptions['items'] as $field => $control): ?>
                <th class="<?= !empty($control['thClass']) ? $control['thClass'] : '' ?>" style="min-width:<?= !empty($control['minWidth']) ? $control['minWidth'] : $controlOptions['cellMinWidth'] ?>;<?= !empty($control['thStyle']) ? $control['thStyle'] : '' ?>">
<?php if (!empty($control['required']) && $requiredStyle == 'mark'): ?>
                    <sup style="color:#ff0000;">*</sup>
<?php endif; ?>
                    <span style="color:#7f7f7f;"><?= !empty($control['label']) ? $control['label'] : '-' ?></span>

<?php if (!empty($control['help'])): ?>
                    <!--帮助-->
                    <i style="cursor: help;font-weight:100;"
                       class="layui-icon layui-icon-tips layui-font-gray f14"
                       data-toggle="popover"
                       data-trigger="hover"
                       data-custom-class="f13 white-space-pre-wrap pointer-event-none"
                       data-html="true"
                       data-content="<?= H5::encode($control['help']) ?>"
                       ym2-bootstrap-plugin="popover"></i>
<?php endif; ?>

<?php if (empty($control['required']) && $requiredStyle == 'text'): ?>
                    <span class="layui-font-gray f12">[ 选填 ]</span>
<?php endif; ?>
<?php if (!empty($control['comment'])): ?>
                    <comment class="f12 font-weight-lighter layui-font-red d-block"><?= $control['comment'] ?></comment>
<?php endif; ?>
                </th>
<?php endforeach; ?>
            </tr>
            </thead>
            <tbody id="<?= $controlOptions['__id'] //用于拖拽 ?>">
            <tr class="drag-item" ng-repeat="(index, contentItem) in <?= $controlOptions['__scope'] ?>">
                <td class="p-1 bg-light">
                    <div class="d-flex flex-column">
                       <span ng-if="contentItem.__allowDefaultDrop" class="layui-font-red cp text-left" ng-click="actionDeleteDynamicControl('<?= $controlOptions["__id"] ?>', index)">
                            <i class="bi bi-trash f15" title="删除"></i>
                        </span>
                        <span ng-if="contentItem.__allowDragSorting" class="drag-handle text-left" style="cursor:move;">
                            <i class="bi bi-list f17" title="拖动排序"></i>
                        </span>
                    </div>
                </td>
<?php foreach ($controlOptions['items'] as $field => $control): ?>
                <td class="<?= !empty($control['class']) ? $control['class'] : '' ?>" style="<?= !empty($control['style']) ? $control['style'] : '' ?>">
<?php switch ($control['control']): case 'text': // 文本 ?>
                    <!--text-->
                    <input type="text"
                           ng-model="contentItem['<?= $field ?>']"
                           autocomplete="off"
<?php if (!empty($control['datalist'])): ?>
                           list="<?= $control['__id'] ?>_datalist{{ index }}"
<?php endif; ?>
                           placeholder="<?= $control['placeholder'] ?>"
                           title="<?= $control['placeholder'] ?>"
                           class="ym2-form-control layui-input layui-input-sm"<?= $control['attribute'] ?>>
<?php if (!empty($control['datalist'])): ?>
                    <datalist id="<?= $control['__id'] ?>_datalist{{ index }}">
<?php foreach ($control['datalist'] as $value): ?>
                        <option><?= H5::encode($value) ?></option>
<?php endforeach; ?>
                    </datalist>
<?php endif; ?>

<?php break; case 'datetime': //datetime/date/year/month/time ?>
<?php case 'date': //datetime/date/year/month/time ?>
<?php case 'year': //datetime/date/year/month/time ?>
<?php case 'month': //datetime/date/year/month/time ?>
<?php case 'time': //datetime/date/year/month/time ?>

                    <!--datetime/date/year/month/time-->
                    <input type="text"
                           ng-model="contentItem['<?= $field ?>']"
                           ym2-laydate
                           ym2-range="<?= $control['range'] ?>"
                           ym2-type="<?= $control['control'] ?>"
                           placeholder="<?= $control['placeholder'] ?>"
                           class="ym2-form-control layui-input layui-input-sm"
                           title="<?= $control['placeholder'] ?>"
                           autocomplete="off"
                           readonly="readonly"<?= $control['attribute'] ?>>
<?php break; case 'select': // select ?>
                    <!--select/select multiple-->
                    <select ng-model="contentItem['<?= $field ?>']"
                            ui-select2="<?= H5::encode(Json::encode($control['uiConfig'])) ?>"
                            class="ym2-form-control invisible"
                            data-placeholder="<?= $control['placeholder'] ?>"
                            title="<?= $control['placeholder'] ?>"<?= !empty($control['multiple']) ? ' multiple' : '' ?><?= $control['attribute'] ?>>
<?php if (empty($control['multiple'])): ?>
                            <option value=""></option>
<?php endif; ?>
<?php foreach ($control['options'] as $value => $text): ?>
<?php if (is_array($text)): ?>
                            <optgroup label="<?= $value ?>">
<?php foreach ($text as $vv => $vTxt): ?>
                                <option <?= in_array($vv, $control['disabled']) ? 'disabled' : '' ?> value="<?= $vv ?>">
                                    <?= $vTxt ?>
                                </option>
<?php endforeach; ?>
                            </optgroup>
<?php else: ?>
                            <option <?= in_array($value, $control['disabled']) ? 'disabled' : '' ?> value="<?= $value ?>">
                                <?= $text ?>

                            </option>
<?php endif; ?>
<?php endforeach; ?>
                    </select>
<?php break; case 'number': //number ?>
                    <!--number-->
                    <input type="number"
                           ng-model="contentItem['<?= $field ?>']"
                           string-to-number
                           autocomplete="off"
<?php if (!empty($control['datalist'])): ?>
                           list="<?= $control['__id'] ?>_datalist{{ index }}"
<?php endif; ?>
                           class="ym2-form-control layui-input layui-input-sm"
                           title="<?= $control['placeholder'] ?>"
                           placeholder="<?= $control['placeholder'] ?>"<?= $control['attribute'] ?>>
<?php if (!empty($control['datalist'])): ?>
                    <datalist id="<?= $control['__id'] ?>_datalist{{ index }}">
<?php foreach ($control['datalist'] as $value): ?>
                        <option><?= H5::encode($value) ?></option>
<?php endforeach; ?>
                    </datalist>
<?php endif; ?>
<?php break; case 'textarea': //textarea ?>
                    <!--textarea-->
                    <textarea ng-model="contentItem['<?= $field ?>']"
                              rows="<?= $control['rows'] ?>"
                              class="ym2-form-control layui-textarea"
                              title="<?= $control['placeholder'] ?>"
                              placeholder="<?= $control['placeholder'] ?>"<?= $control['attribute'] ?>></textarea>
<?php break; case 'checkbox': // checkbox/tag ?>
                    <!--checkbox/tag-->
                    <div class="layui-form">
<?php foreach ($control['options'] as $value => $text): ?>
                        <input type="checkbox"
                               layui-form-render
                               lay-filter="ym2_form_checkbox"
                               ng-model="contentItem['<?= $field ?>']['<?= $value ?>']"
                               ng-true-value="1"
                               ng-false-value="0"
<?php if (!empty($control['disabled']) && in_array($value, $control['disabled'])): ?>
                               disabled="disabled"
<?php endif; ?>
                               title="<?= $text ?>"<?= $control['attribute'] ?>>
<?php endforeach; ?>
                    </div>
<?php break; case 'switch': //switch ?>
                    <!--checkbox switch-->
                    <div class="layui-form">
                        <input type="checkbox"
                               layui-form-render
                               lay-filter="ym2_form_switch"
                               ng-model="contentItem['<?= $field ?>']"
                               ng-true-value="1"
                               ng-false-value="0"
                               title="<?= $control['title'] ?>"
                               lay-skin="switch"<?= $control['attribute'] ?>>
                    </div>
<?php break; case 'password': //password ?>
                    <!--password-->
                    <input type="password"
                           ng-model="contentItem['<?= $field ?>']"
                           autocomplete="off"
                           title="<?= $control['placeholder'] ?>"
                           placeholder="<?= $control['placeholder'] ?>"
                           class="ym2-form-control layui-input layui-input-sm"<?= $control['attribute'] ?>>
<?php break; case 'radio': //radio ?>
                    <!--radio-->
                    <div class="layui-form">
<?php foreach ($control['options'] as $value => $text): ?>
                        <input type="radio"
                               layui-form-render
                               lay-filter="ym2_form_radio"
                               ng-model="contentItem['<?= $field ?>']"
                               value="<?= $value ?>"
<?php if (!empty($control['disabled']) && in_array($value, $control['disabled'])): ?>
                               disabled="disabled"
<?php endif; ?>
                               title="<?= !$control['labelIsHtml'] ? $text : '' ?>"<?= $control['attribute'] ?>>
<?php if ($control['labelIsHtml']): ?>
                            <div lay-radio>
                                <?= $text ?>
                            </div>
<?php endif; ?>
<?php endforeach; ?>
                    </div>
<?php break; case 'range': //range ?>
                    <!--range-->
                    <input class="form-control-range cursor-pointer"
                           string-to-number
                           min="<?= $control['min'] ?>"
                           max="<?= $control['max'] ?>"
                           step="<?= $control['step'] ?>"
                           title="{{ contentItem['<?= $field ?>'] }}"
                           ng-model="contentItem['<?= $field ?>']"
                           type="range"<?= $control['attribute'] ?>>
                    <comment class="layui-font-primary">
                        <?= $control['valueLabel'] ?>{{ contentItem['<?= $field ?>'] }}<?= $control['valueUnit'] ?>

                    </comment>
<?php break; case 'file': //文件上传 ?>
                    <!--file-->
                    <div class="card border-0">
                        <div ym2-upload="<?= H5::encode(Json::encode($control['scenario'])) ?>"
                             ym2-style="<?= $control['style'] ?>"
                             ym2-max="<?= $control['max'] ?>"
                             ng-model="contentItem['<?= $field ?>']">
                        </div>
                    </div>
<?php break; case 'section': //控件区间 ?>
                    <!--section-->
                    <div class="input-group">
                        <input type="text"
                               autocomplete="off"
                               ng-model="contentItem['<?= $field ?>'][0]"
                               placeholder="<?= current($control['placeholder']) ?>"
                               title="<?= current($control['placeholder']) ?>"
                               style="<?= $control['firstStyle'] ?>"
                               class="range1 ym2-form-control layui-input layui-input-sm"<?= $control['firstAttribute'] ?>>
                        <span class="division layui-font-gray px-2">-</span>
                        <input type="text"
                               autocomplete="off"
                               ng-model="contentItem['<?= $field ?>'][1]"
                               placeholder="<?= end($control['placeholder']) ?>"
                               title="<?= end($control['placeholder']) ?>"
                               style="<?= $control['lastStyle'] ?>"
                               class="range2 ym2-form-control layui-input layui-input-sm"<?= $control['lastAttribute'] ?>>
                    </div>
<?php break; case 'static_text': //静态文本 ?>
                    <!--static_text-->
                    <div ngx-bind-html="$compileHtml( contentItem['<?= $field ?>'] )"<?= $control['attribute'] ?>></div>
<?php break; case 'hidden': //hidden ?>
                    <!--hidden-->
                    <input type="hidden" ng-model="contentItem['<?= $field ?>']">
<?php break; endswitch; ?>
                </td>
<?php endforeach; ?>
            </tr>
            </tbody>
        </table>
    </div>
<?php if ($controlOptions['showAddBtn']): ?>
    <!--按钮-->
    <div class="mt-3">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" ng-click="actionAddDynamicControl('<?= $controlOptions["__id"] ?>')">
            添加一行
        </button>
    </div>
<?php endif; ?>
</div>